<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.js"></script>
<!-- 引入global.js -->
<script type="text/javascript" src="js/global.js"></script>
</head>
<body>
	<div class="layui-form-item"
		style="margin-top: 10px; margin-left: 10px">
		<form class="layui-form" method="post" onsubmit="return false;">

			<label class="layui-form-mid">新闻名:</label>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" id="name" name="name" autocomplete="off"
					class="layui-input">
			</div>


			<label class="layui-form-mid">是否删除:</label>
			<div class="layui-input-inline" style="width: 100px;">
				<select id="del" name="del">
					<option value="">请选择</option>
					<option value="1">是</option>
					<option value="0">否</option>
				</select>
			</div>

			<div class="layui-input-inline" style="width: 100px;">
				<button class="layui-btn" id="search" data-type="reload">搜索</button>
			</div>
		</form>
	</div>

	<table id="newstypeTable" lay-filter="newstype"></table>

</body>

<!-- 定义一个顶部工具栏模块  lay-event : 定义了一个事件 -->
<script type="text/html" id="topToolbar">
		<button type="button" class="layui-btn layui-btn-sm" lay-event="createnewstype">添加新闻类型</button>
	</script>

<!-- 定义一个行内工具栏模块  lay-event : 定义了一个事件 -->
<script type="text/html" id="rowToolbar">
		<button type="button" class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
		<button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
	</script>

<script type="text/javascript">
		//引入layUI的table模块（组件）
		layui.use(['table','transfer'],function(){
			//定义变量table来接口layui的tabe组件
			var table = layui.table;
			var transfer = layui.transfer;
			var $ = layui.$;//加载JQuery组件
			
			//渲染表格，显示用户信息
			table.render({
				elem:'#newstypeTable',//根据ID指定要渲染的表格
				url:'Article_listServlet?url=queryNewstypeList',//指定获取表格数据调用的接口地址
				method:'post',//指定请求接口的方法为post方式
				//token : 就是访问接口的令牌，后台接口会根据token的有效性来判断用户是否是正常登录状态
				where:{'token':globalData.myToken},//定义调用接口的入参
				toolbar:'#topToolbar',//安装顶部工具栏
				//把接口返回的信息，展示到表格中
				//定义数据展示的格式
				cols:[
					[
						{field:'id',title:'新闻类型ID',width:300,sort:true,fixed:'left'},
						{field:'name',title:'新闻类型',width:120,sort:true},
						{field:'pid',title:'父类型',width:200},
						{field:'sort',title:'排序',width:200},
						{field:'del',title:'是否删除',width:200},
						{field:'creationtime',title:'创建时间',width:200},
						{field:'updatetime',title:'更新时间',width:200},
						{title:'操作',width:240,toolbar:'#rowToolbar',fixed:'right'}
					]
				],
				page:true,//添加分页，加上这个属性之后，我们的数据表格会有分页的功能
				id:'newstypeTableReload' //给渲染表格的语句块添加一个id
			});
			
			//讲刷新表格数据的操作抽取出来封装成给一个动作，这样就可以多次调用
			// reload : 动作的名字，动作本质其实就是一个函数
			//根据用户数据的查询条件，重新加载表格中的数据
			active = {
				reload:function(){
					var name = $("#name").val();//新闻名
					var del = $("#del").val();//是否删除
					//调用table组件的reload方法
					table.reload('newstypeTableReload',{
						//将用户输入的参数传给接口
						where:{
							'name':name,
							'del':del,
							'token':globalData.myToken
						}
					});
					
				}
			}
			
			//给搜索按钮添加点击事件
			// <button class="layui-btn" id="search" data-type="reload">搜索</button>
			$("#search").on('click',function(){
				var type = $(this).data('type');//reload
				//调用reload动作
				//active[type] ? -- 判断页面中有没有定名称为reload的动作
				//active[type].call(this)  -- 如果页面中有reload动作，则调用reload动作
				//'' --  如果页面中没有reload动作，则什么也不做
				active[type] ? active[type].call(this) : '';
			});
			//同时为所有的顶部工具栏的按钮添加单击事件(一次给多个按钮添加事件)
			//obj -- 当前点击的按钮
			//toolbar(user) -- user表格的顶部工具栏
			table.on('toolbar(newstype)',function(obj){
				//判断用户点击的是哪个按钮
				switch(obj.event){
					case 'createnewstype':
						//layer.open -- 实现打开一个窗口
						layer.open({
							type:2,//窗口的类型
							area:['520px','440px'],//设置弹出窗口的大小
							title:'创建用户',//窗口的名称
							content:'addNewstype.jsp'//设置显示的内容
						});
						
						break;
				}
			});
			
			//同时为所有的行内工具栏的按钮添加单击事件(一次给多个按钮添加事件)
			//obj -- 当前点击的按钮
			//tool(user) -- user表格的行内工具栏
			table.on('tool(newstype)',function(obj){
				//obj.data -- 获取用户点击的这一行的产品信息
				var data = obj.data;
				
				//判断用户点击的是哪个按钮
				if(obj.event == "del"){
					//点击的删除按钮
					layer.confirm('确定要删除 【 '+ data.name +' 】 新闻类型吗？',function(index){
						//用户如果点击了确定，要执行的操作
						//layer.msg('删除');
						//实现删除产品的代码
						//定义删除产品接口地址
						var del_url = "Article_listServlet?url=del";
						//定义接口的入参
						var param = {'token':globalData.myToken,'newstypeId':data.id};
						//调用的删除用户的接口
						$.post(del_url,param,function(res){
							//处理接口返回结果
							if(res.success == true){
								layer.msg("用户删除成功");
								//手动调用reload动作，实现表格的刷新
								active['reload'].call(this);
								
							}else{
								layer.msg("用户删除失败");
							}
							
						},'json');
						
					});
				}else if(obj.event == "edit"){
					layer.open({
						type:2,//窗口的类型
						area:['520px','440px'],//设置弹出窗口的大小
						title:'编辑新闻类型',//窗口的名称
						content:'editNewstype.jsp',//设置显示的内容
						//当editProduct.jsp页面加载完成之后，要执行的函数
						success:function(layero,index){
						//根据窗口的索引index，获取窗口内容的body
						let body = layer.getChildFrame('body',index);
						//获取编辑角色页面的角色名称文本框
						body.find('#name').val(data.name);
						body.find('#id').val(data.id);
				}
			});
		}
	});		
			
});
	</script>
</html>